<template>
  <div class="icons">
    <wc-swiper :autoplay='false'>
      <wc-slide v-for="(page, index) of pages">
        <div class="icon" v-for="item of page">
          <div class='icon-img'  @click="fn(item.id)">
            <img class='icon-img-content' :src='item.icon'/>
          </div>
        </div>
      </wc-slide>
    </wc-swiper>
  </div>
</template>


<script>
  export default {
    name: 'icons',
    props: {
      iconList: Array
    },
    data() {
      return {
        swiperOption: {
          autoplay: false
        },
      }
    },
    methods: {
      fn:function(id){
        console.log(id);
      }
    },
    computed: {
      pages() {
        const pages = []
        this.iconList.forEach((item, index) => {
          const page = Math.floor(index / 8)
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      }
    }
  }
</script>

<style lang="less" scoped>

  .icons /deep/ .wc-pagination {
    display: none !important;
  }

  .icons {
    .icon {
      position: relative;
      overflow: hidden;
      float: left;
      width: 18%;
      height: 0;
      margin: 3.5%;
      padding-bottom: 18%;
      .icon-img {
        .icon-img-content {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

</style>
